<template>
  <div class="tl-page-view">
    <dv-border-box-10>
      <div class="box">
        <div class="df-ac-jcsb">
          <div class="box-title">考勤人数</div>
          <dv-decoration-6 style="width:1.25rem;height:.25rem; position:relative;left:-0.5rem;" />
        </div>
        <div ref="echart" class="box-echart"></div>
      </div>
    </dv-border-box-10>
  </div>
</template>

<script>
import * as echarts from 'echarts'
export default {
  name: 'TopLeft',
  props: {
    total: {
      type: Number,
      default: 0
    },
    number: {
      type: Number,
      default: 0
    }
  },
  watch: {
    total (newV, oldV) {
      this.initChart()
    }
  },
  methods: {
    initChart () {
      const delFormatter = `${this.number}/${this.total}`
      const option = {
        // backgroundColor: '#003885',
        tooltip: {
          // formatter: '{a} <br/>{b} : {c}%'
        },

        series: [
          {
            name: '考勤人数',

            type: 'gauge',

            center: ['50%', '50%'], // 默认全局居中，，，
            radius: '95%',

            min: 0,

            max: this.total,
            splitNumber: 12,
            axisLine: {
              // 坐标轴线

              lineStyle: {
                // 属性lineStyle控制线条样式

                color: [
                  [0.09, '#1e90ff'],

                  [0.82, '#1e90ff'],

                  [1, '#1e90ff']
                ],

                width: 6,

                shadowColor: '#fff', // 默认透明

                shadowBlur: 10
              }
            },

            axisTick: {
              // 坐标轴小标记

              length: 12, // 属性length控制线长
              lineStyle: {
                // 属性lineStyle控制线条样式

                color: 'auto'
              }
            },

            splitLine: {
              // 分隔线

              length: 20, // 属性length控制线长
              lineStyle: {
                // 属性lineStyle（详见lineStyle）控制线条样式

                color: 'auto'
              }
            },

            // 刻度标签。

            axisLabel: {
              color: 'white',
              formatter: function (v) {
                return v.toFixed(0)
              }
            },

            pointer: {
              length: '85%'
            },

            title: {
              offsetCenter: [0, '68%'], // x, y，单位px
              fontWeight: 'bolder',

              fontSize: 15,

              fontStyle: 'italic',

              color: '#fff',

              shadowColor: '#fff', // 默认透明

              shadowBlur: 10
            },

            detail: {
              // 其余属性默认使用全局文本样式，详见TEXTSTYLE

              fontFamily: 'YourWebFontName',

              formatter: delFormatter,

              offsetCenter: [0, 0],

              backgroundColor: '#081327',

              // shadowColor:"red",

              color: '#fff',

              shadowBlur: 44,

              borderRadius: 58,

              borderColor: '#0d2049',

              borderWidth: 1,

              width: 74,

              height: 84,

              lineHeight: 84,

              rich: {
                score: {
                  color: '#fff',

                  fontSize: 17,

                  padding: 0
                }
              }
            },

            data: [{ value: this.number, name: '考勤人数/应到人数' }]
          },
          {
            name: '外侧线条',

            type: 'gauge',

            // 起始角度。圆心 正右手侧为0度，正上方为90度，正左手侧为180度。

            startAngle: 225,

            // 结束角度。

            endAngle: -45,

            center: ['50%', '50%'], // 默认全局居中，，，
            radius: '95%',

            // 仪表盘轴线相关配置。

            axisLine: {
              // 坐标轴线

              show: true,

              lineStyle: {
                // 属性lineStyle控制线条样式

                width: 3,

                color: [
                  // [
                  //   1,
                  //   new echarts.graphic.LinearGradient(0, 1, 1, 0, [
                  //     {
                  //       offset: 0,

                  //       color: '#ced9eb'
                  //     },
                  //     {
                  //       offset: 2000 / 5035,

                  //       color: '#ced9eb'
                  //     },
                  //     {
                  //       offset: 1,

                  //       color: '#07182c'
                  //     }
                  //   ])
                  // ]
                  [0, '#FF6E76'],
                  [this.number / this.total, '#FDDD60']
                ]
              }
            },

            // 分隔线样式。

            splitLine: {
              show: false
            },

            // 刻度样式

            axisTick: {
              show: false
            },

            // 刻度标签。

            axisLabel: {
              show: false
            },

            // 仪表盘指针。

            pointer: {
              // 这个show属性好像有问题，因为在这次开发中，需要去掉指正，我设置false的时候，还是显示指针，估计是BUG吧，我用的echarts-3.2.3；希望改进。最终，我把width属性设置为0，成功搞定！

              show: false
            },

            // 仪表盘标题。

            title: {
              show: false
            },

            // 仪表盘详情，用于显示数据。

            detail: {
              show: false,

              offsetCenter: [0, '-10%'],

              formatter: '',

              textStyle: {
                fontSize: 0
              }
            },

            data: [{ name: '数量', value: 'n' }],

            zlevel: 3
          }
        ]
      }
      var myChart = echarts.init(this.$refs.echart)
      myChart.setOption(option)
    }
  }
}
</script>

<style lang="scss" scoped>
.tl-page-view {
  padding: 0.25rem;
  height: calc(100% - 0.5rem);
  .box {
    position: relative;
    height: 100%;
    .box-title {
      color: #1bb4f9;
      font-size: 0.225rem;
      padding: 0.25rem 0 0 0.625rem;
    }
    .box-echart {
      width: 100%;
      height: calc(100% - 0.55rem)
    }
  }
}
</style>
